<template>
   <div class="j-input_cell" :class="{ border: border }">
      <div class="j-field__label">{{label}}</div>
      <div class="j-input">
        <!-- {{max}} -->
        <textarea v-model="inputValue" class="textarea" :placeholder="placeholder" @focus="onFocus" @blur="onBlur" v-if="type==='textarea'"></textarea>
        <input ref="_input" :type="type" v-else @focus="onFocus" :maxlength="max"  @blur="onBlur" class="input" v-model="inputValue" :placeholder="placeholder" />
        <!-- <span class="j-input-close" v-if="inputValue && isClose" @click="inputClose"></span> -->
      </div>
      <slot/>
   </div>
</template>
<script>
export default {
  name: 'JInput',
  data() {
    return {
      isClose: false
    };
  },
  props: {
    border: {
      type: String
    },
    label: {
      type: String
    },
    max: {
      type: String
    },
    type: {
      type: String
    },
    placeholder: {
      type: String
    },
    value: {
      type: [String, Number]
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  mounted() {
  },
  methods: {
    onFocus() {
      this.isClose = true;
      this.$emit('focus');
    },
    onBlur() {
      this.inputValue && (this.isClose = false);
      this.$emit('blur');
    },
    inputClose(ev) {
      console.log(ev);
      this.inputValue = '';
      this.$refs._input.focus();
    }
  }
};
</script>
<style lang="scss" scoped>
.j-input_cell{
  padding: 24px 0 22px;
  margin: 0 30px;
  display: flex;
  .j-field__label{
    color: #111;
    font-size: 30px;
    min-width: 145px;
  }
  .j-input{
    flex: 1;
    text-align: left;
    padding: 0 0 0 20px;
    // width: 100%;
    position: relative;
    .input{
      font-size: 30px;
      width: 100%;
      padding-top: 1px; /*no*/
      color: #999;
    }
    .textarea{
      font-size: 30px;
      width: 100%;
    }
    .j-input-close{
        display: block;
        position: absolute;
        top:0;
        right: 8px;
        width: 50px;
        height: 50px;
        z-index: 99;
        background-image: url('../assets/images/icon-close.png');
        background-repeat: no-repeat;
        background-size: contain;
    }
    .input::placeholder,.textarea::placeholder{
      font-size: 30px;
      color: #999;
    }
  }
}
.j-input_cell.border{
  position: relative;
  &::after{
    content: '';
    display: block;
    height:1px; /*no*/
    position: absolute;
    bottom:0;
    left:20px;
    right: 20px;
    background-color:rgba(0,0,0,.08);

  }
}
</style>
